<template>
  <div class="text" :height="240">
    <!-- 监听鼠标滚动 -->
    <el-carousel class="swiper_yang_zhi_dang_an" :interval="3000" :autoplay="false" indicator-position="none" ref="swaiper-1">
      <el-carousel-item class="yang_zhi_box" v-for="(item, index) in yangZhiDangAnList" :key="index" >
        <div class="yang_zhi_top">
          <div class="left_box text_center">
            <!-- <img :src="yang_zhi_def_img" alt=""> -->
            <div class="text_1 left_title pt_20">健康率</div> 

            <div class="bai_fen_bi_box">
              <percentYangZhi class="full bai_fen_bi" :value="80 + index"  />
            </div>
          </div>

          <div class="center_box">
            <!-- <img 
              v-if="item.files && item.files.length" 
              :src="img_path + item.files[0].path || oxImg"
              alt="图片未上传"
            > -->
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 0" :src="oxImg1" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 1" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 2" :src="oxImg3" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 3" :src="oxImg4" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 4" :src="oxImg5" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 5" :src="oxImg6" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 6" :src="oxImg7" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 8" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 9" :src="oxImg1" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 10" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 11" :src="oxImg3" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 12" :src="oxImg4" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 13" :src="oxImg5" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 14" :src="oxImg6" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 15" :src="oxImg7" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 16" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 17" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 8 && index == 18" :src="oxImg1" alt="">

            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 0" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 1" :src="oxImg7" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 2" :src="oxImg6" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 3" :src="oxImg5" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 4" :src="oxImg5" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 5" :src="oxImg6" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 6" :src="oxImg7" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 8" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 9" :src="oxImg1" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 10" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 11" :src="oxImg3" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 12" :src="oxImg4" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 13" :src="oxImg5" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 14" :src="oxImg6" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 15" :src="oxImg7" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 16" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 17" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 9 && index == 18" :src="oxImg1" alt="">

            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 0" :src="oxImg1" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 1" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 2" :src="oxImg1" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 3" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 4" :src="oxImg5" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 5" :src="oxImg6" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 6" :src="oxImg7" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 8" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 9" :src="oxImg1" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 10" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 11" :src="oxImg3" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 12" :src="oxImg4" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 13" :src="oxImg5" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 14" :src="oxImg6" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 15" :src="oxImg7" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 16" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 17" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 10 && index == 18" :src="oxImg1" alt="">

            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 0" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 1" :src="oxImg3" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 2" :src="oxImg4" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 3" :src="oxImg5" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 4" :src="oxImg1" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 5" :src="oxImg6" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 6" :src="oxImg7" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 8" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 9" :src="oxImg1" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 10" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 11" :src="oxImg3" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 12" :src="oxImg4" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 13" :src="oxImg5" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 14" :src="oxImg6" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 15" :src="oxImg7" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 16" :src="oxImg8" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 17" :src="oxImg2" alt="">
            <img class="border_radius_10 response_img" v-if="activeMuHuId == 15 && index == 18" :src="oxImg1" alt="">

            <img class="border_radius_10 response_img" v-if="[66, 67, 68, 69].includes(activeMuHuId)" :src="oxImg2" alt="">
          </div>

          <div class="right_box">
            <!-- <div class="niu_biao_hao color_255_280_0">{{ item.num }}</div> -->
            <div class="text_1 mini_text color_255_280_0">编号: {{ item.num }}</div>
            <div class="text_1 mini_text color_255_280_0">类型 : {{ item.animalTypeName || '' }}</div>
            <!-- <div class="text_1 mini_text color_255_280_0">年龄: {{ item.age }} 岁</div> -->
            <div class="text_1 mini_text color_255_280_0">年龄: 3 岁</div>
            <div class="text_1 mini_text color_255_280_0">体重 : 356 KG</div>
            <!-- <div class="mini_text">健康状况 : {{ item.weight }}</div> -->
            <div class="text_1 mini_text color_255_280_0">疫苗接种 : {{ item.morbidity || 12 }}</div>
            <div class="text_1 mini_text color_255_280_0">配种次数 : {{ item.breedingCount || 1 }}</div>
            <!-- <div class="text_1 jin_chang_ri_qi mini_text color_255_280_0">进场日期 : {{ item.createTime }}</div> -->
          </div>
        </div>

        <div class="yang_zhi_bottom">
          <div class="w_full h_40 lh_40 flex_row_around">
            <div class="text_1 main_text color_255_280_0 cursor" :class="{ theme_color_green: activeRecordIndex == 0 }" @click="selectRecordTab('0')">成长记录</div>
            <div class="text_1 main_text color_255_280_0 cursor" :class="{ theme_color_green: activeRecordIndex == 1 }" @click="selectRecordTab('1')">防疫记录</div>
            <div class="text_1 main_text color_255_280_0 cursor" :class="{ theme_color_green: activeRecordIndex == 2 }" @click="selectRecordTab('2')">育种记录</div>
            <div class="text_1 main_text color_255_280_0 cursor" :class="{ theme_color_green: activeRecordIndex == 3 }" @click="selectRecordTab('3')">交易记录</div>
          </div>

          <div class="ti_zhong_jian_ce_com">
            <tiZhongJiainCe v-if="activeRecordIndex == 0" />

            <FangYiJiLu v-if="activeRecordIndex == 1" />

            <YuZhongJiLu v-if="activeRecordIndex == 2" />

            <JiaoYiJiLu v-if="activeRecordIndex == 3" />
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getYangZhiDangAn } from '@/config/mu-hu-request';
import percentYangZhi from './percent-yang-zhi.vue'
import tiZhongJiainCe from './ti-zhong-jian-ce.vue'
import FangYiJiLu from './fang-yi-ji-lu.vue';
import YuZhongJiLu from './yu-zhong-ji-lu.vue';
import JiaoYiJiLu from './jiao-yi-ji-lu.vue';

const IMG_PATH = process.env.TE_API

export default {
  name: "WidgetText",
  components: { percentYangZhi, tiZhongJiainCe, FangYiJiLu, YuZhongJiLu, JiaoYiJiLu },
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      activeMuHuId: '',
      oxImg1: require('@/assets/images/ba-lin-you-qi/4.jpg'),
      oxImg2: require('@/assets/images/ba-lin-you-qi/2.jpg'),
      oxImg3: require('@/assets/images/ba-lin-you-qi/3.jpg'),
      oxImg4: require('@/assets/images/ba-lin-you-qi/1.jpg'),
      oxImg5: require('@/assets/images/ba-lin-you-qi/2.jpg'),
      oxImg6: require('@/assets/images/ba-lin-you-qi/3.jpg'),
      oxImg7: require('@/assets/images/ba-lin-you-qi/3.jpg'),
      oxImg8: require('@/assets/images/ba-lin-you-qi/3.jpg'),
      oxImg9: require('@/assets/images/ba-lin-you-qi/3.jpg'),

      activeRecordIndex: 0,
      img_path: IMG_PATH,
      yang_zhi_def_img: require('@/assets/images/shi-fan-dian/yang_zhi_img.png'),
      options: {},
      optionsData: {},
      yangZhiDangAnList: [],
      percentData: {
        data: {
          dataType: "staticData",
          refreshTime: 5000,
          staticData: [
            { num: 34 }
          ]
        },
      },

      user1Data: [],
      user2Data: [],
      user3Data: [],
      user4Data: [],
    };
  },
  created() {
    //  >>>>>>>>> 牧户下 暂时没有养殖档案, 无法通过 id 进行查找 <<<<<<<<<<<  2023-06-09

    this.$bus.$on('clickUserName', id => {
      this.activeMuHuId = id

      if (id == 8) {
        this.yangZhiDangAnList = this.user1Data
      } else if (id == 9) {
        this.yangZhiDangAnList = this.user2Data
      }  else if (id == 10) {
        this.yangZhiDangAnList = this.user3Data
      }  else if (id == 15) {
        this.yangZhiDangAnList = this.user4Data
      } 
      
      // 养殖 档案 无法通过 牧户的 id 获取
      // this.getYangZhiDangAnData(id)
    })
  },

  mounted() {
    this.getYangZhiDangAnData('')
  },
  methods: {
     // 获取养殖档案
     async getYangZhiDangAnData(id) {
      let res = await getYangZhiDangAn(id);
      if (res.code == 200) {
        this.user1Data = res.data.slice(0, 3)
        this.user2Data = res.data.slice(4, 5)
        this.user3Data = res.data.slice(6, 7)
        this.user4Data = res.data.slice(8)

        this.yangZhiDangAnList = res.data

        // console.log('养殖档案 : ', res.data);
      } 
    },

    // 切换 成长、防疫、育种、交易 记录
    selectRecordTab(index) {
      this.activeRecordIndex = index
    }
  }
};
</script>

<style scoped lang="less">

.activeColor { color: red; font-weight: 500; }
.text::-webkit-scrollbar {
  display: none;
}

.text {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  .swiper_yang_zhi_dang_an { 
    width: 100%;
    height: 100% !important;
    // border: 1px solid blue;

    .yang_zhi_box {
      width: 100%;
      height: 200% !important;
      // overflow: hidden;
      // border: 1px solid blue;

      .yang_zhi_top {
        width: 100%;
        height: 50% !important;
        // border: 1px solid #fff;
      
        .left_box {
          width: 30%;
          height: 80%;
          float: left;
          // border: 1px solid blueviolet;

          .left_title {
            width: 100%;
            color: rgb(250, 212, 0);
            font-size: 18px;
          }

          .bai_fen_bi_box {
            width: 100%;
            height: calc(100% - 30px);
            position: relative !important;
            // text-align: center;
            // display: flex;
            // align-items: center;
            // border: 1px solid #f00;

            .bai_fen_bi { position: absolute !important;  }
          }
        }
        .center_box {
          width: 40%;
          height: 100%;
          float: left;
          // border: 1px solid greenyellow;

          img { width: 100%; height: 100%; }
        }
        .right_box {
          width: 30%;
          height: 100%;
          float: left;
          // border: 1px solid yellow;
          padding: 10px;

          .niu_biao_hao { width: 100%; text-align: center; }
          .mini_text { width: 100%; text-align: left;  }
        }
      }
      
      .yang_zhi_bottom {
        width: 100%;
        height: 100%;

        .ti_zhong_jian_ce_com {
          width: 100%;
          height: 100%;
        }
      }
    }
  }  
}

</style>

<style>
.swiper_yang_zhi_dang_an > .el-carousel__container { height: 50% !important; }

/* .el-carousel__item { height: 150% !important; } */

.bai_fen_bi > .echarts { 
  width: 130px !important; 
  height: 130px !important;
  position: absolute !important; 
  left: 30%;
  top: 20%;
}
/* .ti_zhong_jian_ce_com > .echarts {
  width: 180px !important; 
  height: 180px !important;
  position: absolute !important; 
  top: 300px !important; 
  left: 17px !important;
} */
</style>
